<template>
  <div class="baseInfo">
    <vxe-table border 
    stripe ref="tableRef" 
    size="small" 
    header-align="center" :row-config="rowConfig"
      :column-config="columnConfig" :data="tableData"
      
        class="split-table"
      >
      <vxe-column type="seq" width="50" title="序号" align="center" fixed="left" />
      <vxe-column field="productName" title="商品名称" align="center" width="140" />
      <vxe-column field="productCode" title="商品编码" align="center" width="140" />
      <vxe-column field="specification" title="规格信息" align="center" width="140" />
      <vxe-column field="platformProductName" title="平台商品名称" align="center" width="140" />
      <vxe-column field="platformProductCode" title="平台商品编码" align="center" width="140" />
      <vxe-column field="platformSpecification" title="平台商品规格信息" align="center" width="140" />
      <vxe-column field="prepareCount" title="本次配货数" align="center" width="150">
        <template #default="{ row }">
          <el-input-number v-model="row.prepareCount" size="mini" :min="0" :precision="0" :max="row.unPrepareCount" />
        </template>
      </vxe-column>
      <vxe-column field="" title="剩余未配货数？" align="center" width="140" />

      <vxe-column field="" title="商品数量?" align="center" width="140" />
      
    </vxe-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

  </div>
</template>

<script>
import {
  getPrepareItems
} from "@/api/mes/sales/prepare";
export default {
  name: 'products',
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    cellId: undefined,
    warehouseList: [], // 仓库下拉：
  },
  data() {
    return {
      tableData: [],
      selectGoodsDialogVisible: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      rowConfig: {
        keyField: '',
        isHover: true,
        isCurrent: true,
      },
      columnConfig: {
        resizable: true,
        align: 'center',
        headerAlign: 'center',
      },
      selectingRow: null, platformSelectingRow: null,
      platformSelectDialogVisible: false,

    }
  },
  watch: {
    cellId: {
      immediate: true,
      handler(val) {
        // cellId为真实id时可请求数据，否则初始化空表
        if (val && val !== 'add') {
          this.getList();
        } else {
          this.tableData = [];
        }
      },
    }
  },
  methods: {
    getList() {
      getPrepareItems(this.cellId).then(res => {
        if (res.code === 200) {
          this.tableData = res.data || [];
        }
      })
    },
    // 提供给父组件调用的方法，获取表格数据
    getTableData() {
      // const data = [];
      // this.tableData.forEach(item => {
      //   data.push(
      //     { 
      //       ...item,
      //       prepareCount: Number(item.prepareCount) || 0,
      //     }
      //   );
      // });
      return this.tableData;
    },

  },
  // ...methods结束
}
</script>

<style lang="scss" scoped>
.product-code-selectable {
  user-select: none;
  transition: color 0.2s;
}

.product-code-selectable:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.baseInfo {
  &-header {
    margin-bottom: 10px;
  }
}

// 只读模式下的文本样式优化
::v-deep .vxe-body--column {
  .vxe-cell {
    span {
      color: #606266;
      font-size: 13px;
      line-height: 1.4;
      
      &:not(:empty) {
        padding: 2px 4px;
      }
    }
  }
}
  .split-table{
    max-height: 650px;
    overflow-y: auto;
  }
</style>